<template>
  <el-dialog
    :visible.sync="dialog"
    :close-on-click-modal="false"
    :title="title"
    width="450px"
    :append-to-body="true"
    top="5px"
    @close="doClose"
  >
    <div>
      <div style="margin-top:25px;">
        <el-form ref="editForm" :model="entity" :rules="rules" label-width="auto" size="mini">
          <el-row>
            <el-col :span="24">
              <el-form-item size="mini" label="属性KEY:" :required="!disabled" prop="fieldKey">
                <el-input v-model="entity.fieldKey" size="mini" placeholder="请输入" maxlength="128" show-word-limit clearable style="width: 300px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item size="mini" label="属性名称:" :required="!disabled" prop="fieldName">
                <el-input v-model="entity.fieldName" size="mini" placeholder="请输入" maxlength="128" show-word-limit clearable style="width: 300px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item size="mini" label="数据类型:" :required="!disabled" prop="dataType">
                <el-select v-model="entity.dataType" placeholder="请选择" size="mini" style="width: 300px;" clearable>
                  <template v-for="item in parent.parent.dataTypes">
                    <el-option :key="item.value" style="font-size:12px;height: 20px;line-height: 20px;" :label="item.name" :value="item.value" />
                  </template>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item size="mini" label="数据格式:" prop="dataFormat">
                <el-input v-model="entity.dataFormat" size="mini" placeholder="请输入" maxlength="128" show-word-limit clearable style="width: 300px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item size="mini" label="备注:" prop="remark">
                <el-input v-model="entity.remark" type="textarea" maxlength="1024" show-word-limit rows="1" size="mini" placeholder="请输入" style="width: 300px;" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <el-row :gutter="20" style="margin-top:30px;">
      <el-col :span="24">
        <div style="text-align: right;">
          <el-button size="small" @click="doClose()">取消</el-button>
          <el-button type="primary" size="small" @click="doSave()">确定</el-button>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import { Message } from 'element-ui'
import Rule from './js/field-rules'
import Validate from './js/field-validates'
import { getEmptyVariableField } from './js/variable'
import { uuid } from '@/utils/uuid'

export default {
  props: {
    parent: {
      type: Object,
      default: null
    }
  },
  data() {
    var field = this.getEmptyVariableField()
    field.uuid = this.uuid()
    return {
      dialog: false,
      loading: false,
      currentObj: this,
      activeName: 'edit',
      title: '',
      rules: {},
      rule: new Rule(this),
      validate: new Validate(this),
      tableHeight: window.innerHeight * 0.45,
      entity: field,
      time: 170
    }
  },
  computed: {
    disabled: function() {
      return (this.entity.dataStatus !== undefined && this.entity.dataStatus === 1) || (this.entity.id !== null)
    }
  },
  created() {
    this.$nextTick(() => {
    })
  },
  mounted() {
    this.$nextTick(() => {
      this.rule.initRules()
    })
  },
  methods: {
    getEmptyVariableField,
    uuid,
    // 关闭
    doClose() {
      this.dialog = false
      this.entity = this.getEmptyVariableField()
      this.entity.uuid = this.uuid()
      this.$refs.editForm.clearValidate()
      console.log('doClose entity:' + JSON.stringify(this.entity))
    },
    // 确认
    doSave() {
      var _this = this
      console.log('entity:' + JSON.stringify(this.entity))
      this.$refs.editForm.validate(valid => {
        if (valid) {
          if (_this.entity.id || _this.entity.dataStatus === 1) { // 修改
            var index = -1
            for (var i = 0; i < _this.parent.entity.variableFields.length; i++) {
              if (_this.parent.entity.variableFields[i].uuid === _this.entity.uuid) {
                index = i
                break
              }
            }
            if (index !== -1) {
              _this.$set(_this.parent.entity.variableFields, index, _this.entity)
            }
          } else if (_this.entity.dataStatus === 0) { // 新增
            if (_this.parent.entity.variableFields) {
              _this.entity.dataStatus = 1
              _this.parent.entity.variableFields.push(_this.entity)
            }
          }
          _this.dialog = false
        } else {
          Message({
            message: '校验失败',
            type: 'warning',
            duration: 2 * 1000
          })
        }
      })
    }
  }
}
</script>
<style scoped>
.field-divider >>> .el-divider--horizontal {
  margin: 10px 0px;
}
</style>
